<template lang="html">
  <div id="pie" ref="container"></div>
</template>

<script>
import * as d3 from 'd3'
export default {
  methods: {
    init () {
      d3.csv('/static/d3/data-pie.csv', type, function (data) {
        let width = 400,
          height = 400;

        // SVG
        let svg = d3.select('#pie')
          .append("svg")
          .attr("width", width)
          .attr("height", height)

        // g
        let g = svg.append("g")
          .attr("transform", "translate(200, 200)")

        let arc_generator = d3.arc()
          .innerRadius(100)
          .outerRadius(200)

        let angle_data = d3.pie()
          .value(function (d) {
            return d.population
          })

        // color
        let color = d3.scaleOrdinal(d3.schemeCategory10)

        // pie
        g.selectAll("path")
          .data(angle_data(data))
          .enter()
          .append("path")
          .attr("d", arc_generator)
          .style("fill", function (d, i) {
            return color(i)
          })

        // text
        g.selectAll("text")
          .data(angle_data(data))
          .enter()
          .append("text")
          .text(function (d) {
            return d.data.education
          })
          .attr("transform", function(d) { return "translate(" + arc_generator.centroid(d) + ")"; })
          .attr("text-anchor", "middle")
      })

      function type (d) {
        d.population = +d.population
        return d
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="css">
</style>
